<!DOCTYPE html><html><head><title>d3js  —– 绘制一个坐标轴中的colunmSeries</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h4 id="d3js-绘制一个坐标轴中的colunmseries">d3js  —– 绘制一个坐标轴中的colunmSeries</h4>

<p></p>

<ol><li rel="1">绘制一个<code>svg</code>画布 <br>
<ol>
<li rel="1">设置svg的宽度height和高度width</li>
<li rel="2">使用<code>d3.select('box').append(svg).attr('width', width).attr('height', height)</code>在.box中添加svg画布</li>
<li rel="3">使用 <code>svg.attr('fill', '#f66')</code>设置内容的默认<code>fill</code>属性值</li>
<li rel="4">使用<code>svg.classed('canvas', true)</code>设置当前svg的类名</li></ol></li>
<li rel="2">绘制坐标轴 <br>
<ol>
<li rel="1">生成比例尺   <code>d3.scale</code> <br>
<ol>
<li rel="1">x轴比例尺   <code>xScale</code> <br>
<ol>
<li rel="1">离散型比例尺 <code>d3.scale.ordinal()</code>  <code>domain</code>和<code>range</code>一一对应</li>
<li rel="2">设置比例尺属性 <br>
<ul>
<li><code>.domain(array)</code>  设置定义域  <strong>x轴的刻度值一般使用数组进行一一对应，在取值的时候要用对应的数组进行取值，如<code>xScale(xText[i])</code>,用数组的对应项来得到值域中的对应值</strong></li>
<li><code>.rangeRoundBands([min, max])</code> 设置值域，值域在svg中即对应的显示大小</li></ul></li></ol></li>
<li rel="2">y轴比例尺  <code>yScale</code> <br>
<ol>
<li rel="1">线性比例尺 <code>d3.scale.linear()</code>  <code>domain</code> 和 <code>range</code> 线性对应</li>
<li rel="2">设置比例尺属性 <br>
<ul>
<li><code>.domain([min, max])</code> </li>
<li><code>.range([min, max])</code></li></ul></li></ol></li></ol></li>
<li rel="2">生成轴线生成器  <code>d3.svg.axis()</code> <br>
<ol>
<li rel="1">x轴  <code>xAxis = d3.svg.axis().scale(xScale).orient('bottom')</code> </li>
<li rel="2">y轴  <code>yAxis = d3.svg.axis().scale(yScale).orient('left')</code></li></ol></li>
<li rel="3">在svg中绘制轴线</li></ol></li>
</ol>

<pre class="prettyprint hljs-light"><code class="language-javascript hljs">    svg.append(g)  <span class="hljs-comment">//x轴</span><br>        .attr(<span class="hljs-string">'fill'</span>, <span class="hljs-string">'none'</span>)       <span class="hljs-comment">// 不使用填充</span><br>        .attr(<span class="hljs-string">'stroke'</span>, <span class="hljs-string">'#333'</span>)     <span class="hljs-comment">// 使用stroke绘制</span><br>        .attr(<span class="hljs-string">'transform'</span>, <span class="hljs-string">'translate(x, y)'</span>)  <span class="hljs-comment">//平移  按照svg的padding值和y轴的高度平移</span><br>        .call(xAxis);     <span class="hljs-comment">// 使用xAxis坐标轴生成器进行绘制</span><br></code></pre>



<pre class="prettyprint hljs-light"><code class="language-javascript hljs">    svg.append(g)  <span class="hljs-comment">//y轴</span><br>        .attr(<span class="hljs-string">'fill'</span>, <span class="hljs-string">'none'</span>)<br>        .attr(<span class="hljs-string">'stroke'</span>, <span class="hljs-string">'#333'</span>)<br>        .attr(<span class="hljs-string">'transform'</span>, <span class="hljs-string">'translate(x, y)'</span>)<br>        .call(<span class="hljs-string">'yAxis'</span>);<br></code></pre>

<ol start="3"><li rel="3">绘制图形 <br>
<ol>
<li rel="1">在svg中使用<strong>data-join</strong>方法添加矩形 <br>
<code>svg.selectAll('.rect') <br>
.data(data) <br>
.enter() <br>
.append('rect') <br>
.classed('rect', true)</code></li>
<li rel="2">设置对应的图形属性来显示数据 <br>
<ol>
<li rel="1">对应每个数据矩形的x坐标  <code>.attr('x', function(d, i) { return ... })</code></li>
<li rel="2">对应每个数据矩形的y坐标  <code>.attr('y', function(d, i) { return ... })</code> （<code>paddingTop + Y轴高 - yScale(d)</code>）</li>
<li rel="3">矩形宽度<code>.attr('width', rWidth)</code></li>
<li rel="4">矩形高度<code>.attr('height', function (d, i) { return yScale(d);})</code></li></ol></li></ol></li>
<li rel="4">绘制文字 <code>text</code> <br>
<ol>
<li rel="1">同样使用<strong>data-join</strong>方法添加数据文字</li></ol></li>
</ol>



<pre class="prettyprint hljs-light"><code class="language-javascript hljs">    svg.selectAll(<span class="hljs-string">'.text'</span>)            <span class="hljs-comment">//data-join方法</span><br>        .data(data)<br>        .enter()<br>        .append(<span class="hljs-string">'text'</span>)                <span class="hljs-comment">//添加text对象</span><br>        .classed(<span class="hljs-string">'text'</span>, <span class="hljs-literal">true</span>)         <span class="hljs-comment">//设置类名为text</span><br>        .attr(<span class="hljs-string">'x'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d, i</span>) </span>{   <span class="hljs-comment">//遍历数据</span><br>            <span class="hljs-keyword">return</span> paddingLeft + rWidth * <span class="hljs-number">.5</span> + <span class="hljs-number">10</span> + xScale(i);  <span class="hljs-comment">//设置开始书写点的x坐标</span><br>        })<br>        .attr(<span class="hljs-string">'y'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">d, i</span>) </span>{   <span class="hljs-comment">//遍历数据</span><br>            <span class="hljs-keyword">return</span> paddingTop + <span class="hljs-number">300</span> - yScale(d) + <span class="hljs-number">15</span>;  <span class="hljs-comment">//设置开始书写点的y坐标</span><br>        })<br>        .attr(<span class="hljs-string">'fill'</span>, <span class="hljs-string">'white'</span>)   <span class="hljs-comment">//使用白色</span><br>        .text(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">d, i</span>)</span>{    <span class="hljs-comment">//遍历绘制</span><br>            <span class="hljs-keyword">return</span> d;<br>        });<br></code></pre>

<ol start="5"><li rel="5">总结： <br>
<ol>
<li rel="1">坐标轴的绘制 <br>
<ol>
<li rel="1">x坐标轴的比例尺一般使用的是散点比例尺<code>d3.scale.ordinal()</code></li>
<li rel="2">x坐标轴的值域使用的是<code>rangeRoundBands([min, max])</code>，用来使散点映射到连续区间中</li>
<li rel="3">y坐标轴在绘制时因为是向下为正向，所以定义域是从大到小，如<code>domain([100, 0]).range([0, 300])</code></li>
<li rel="4">添加到svg中时要注意坐标轴位置的平移距离，使用padding值和坐标轴本身的长度进行计算</li></ol></li>
<li rel="2">图形的绘制 <br>
<ol>
<li rel="1">使用data-join方法<code>svg.selectAll(...).data(data).enter().append('rect').attr(...)</code></li>
<li rel="2">根据每个图形需要的参数依次进行属性的绘制，如 <code>rect -- x, y, width, height</code></li>
<li rel="3">对应每一个图形的参数要进行相应的比例尺计算，利用<code>xScale 和 yScale</code></li>
<li rel="4">关于x中的计算要使用对应的xText[i]来进行取值</li></ol></li>
<li rel="3">文字 <br>
<ol>
<li rel="1">使用data-join方法进行绘制</li>
<li rel="2">每一个文字的起始点算法和绘制图形的起始点绘制相类似，要额外的计算文字居中的偏移值</li>
<li rel="3">文字的颜色用<code>.attr('fill', 'white')</code>进行设置</li></ol></li></ol></li>
</ol></div></body></html>